<template>
  <div class="node-details">
    <h1 class="page-title">节点详情</h1>

    <div class="node-info">
      <div class="info-item">
        <span class="label">节点名称:</span>
        <span>{{ nodeInfo.nodeName }}</span>
      </div>
      <div class="info-item">
        <span class="label">启用状态:</span>
        <template v-if="nodeInfo.status">
          <dict-tag :options="dict.type.edge_nodes_ip_status" :value="nodeInfo.status"/>
        </template>
      </div>
      <div class="info-item">
        <span class="label">所属集群:</span>
        <span>{{ cluster || '没有设置集群' }}</span>
      </div>
      <div class="info-item">
        <span class="label">IP地址:</span>
        <span>{{ nodeInfo.ip }}</span>
      </div>
      <div class="info-item">
        <span class="label">DNS线路:</span>
        <span>{{ nodeInfo.dnsLine }}</span>
      </div>
      <!-- DNS记录 -->
      <div class="info-item">
        <!-- 节点DNS记录列表 -->
        <section class="domain-list">
          <table>
            <thead>
            <tr>
              <th>集群</th>
              <th>记录名</th>
              <th>记录类型</th>
              <th>线路</th>
              <th>记录值</th>
              <th>状态</th>
            </tr>
            </thead>
            <tbody>
              <td>{{ cluster }}</td>
              <td>{{ nodeInfo.dnsLine }}</td>
              <td>{{ nodeInfo.dnsType || 'A'}}</td>
              <td>{{ nodeInfo.dnsLine}}</td>
              <td>{{ nodeInfo.ip}}</td>
              <td>
                <template v-if="nodeInfo.status">
                  <dict-tag :options="dict.type.edge_nodes_ip_status" :value="nodeInfo.status"/>
                </template>
              </td>
            </tbody>
          </table>
        </section>
      </div>

      <div class="info-item">
        <span class="label">所属区域:</span>
        <span>{{ region || '没有设置区域' }}</span>
      </div>
      <div class="info-item">
        <span class="label">所属分组:</span>
        <span>{{ group || '没有设置分组' }}</span>
      </div>
    </div>

    <div class="more-options">
      <button @click="toggleMoreOptions" class="toggle-btn">
        {{ showMoreOptions ? '收起选项' : '更多选项' }}
      </button>
      <div v-if="showMoreOptions" class="expanded-options">
        <div class="info-item">
          <span class="label">是否同步IP名单:</span>
          <span>{{ syncIpList ? '是' : '否' }}</span>
        </div>
        <div class="info-item">
          <span class="label">SSH主机地址:</span>
          <span>{{ sshHost || '尚未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">SSH主机端口:</span>
          <span>{{ sshPort || '尚未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">SSH登录认证:</span>
          <span>{{ sshInfo[0].sshUser || '尚未设置' }}</span>
        </div>
        <div class="info-item">
          <span class="label">缓存硬盘容量:</span>
          <span>{{ cacheDiskCapacity || '没有限制' }}</span>
        </div>
        <div class="info-item">
          <span class="label">硬盘预估写入最大速度:</span>
          <span>{{ diskWriteSpeed || '-' }}</span>
        </div>
        <div class="info-item">
          <span class="label">缓存内容容量:</span>
          <span>{{ cacheContentCapacity || '没有限制' }}</span>
        </div>
        <div class="info-item">
          <span class="label">CPU线程数:</span>
          <span>{{ cpuThreads || '没有限制' }}</span>
        </div>
        <div class="info-item">
          <span class="label">API节点地址:</span>
          <span>{{ apiNodeAddress }}</span>
        </div>
      </div>
    </div>

    <div class="connection-status">
      <div class="status-item">
        <span class="label">运行状态:</span>
        <template v-if="nodeInfo.status">
          <dict-tag :options="dict.type.edge_nodes_ip_status" :value="nodeInfo.status"/>
        </template>
      </div>
      <button v-if="connectionStatus === '已断开'" @click="installNode" class="install-btn">
        去安装
      </button>
      <div class="status-item">
        <span class="label">最近API连接状况:</span>
        <span>{{ apiConnectionStatus || '尚未上报数据' }}</span>
      </div>
    </div>

    <div class="installation-info">
      <div class="info-item">
        <span class="label">节点ID:</span>
        <span>{{ nodeInfo.nodeId }}</span>
      </div>
      <div class="info-item">
        <span class="label">密钥:</span>
        <span>{{ secret }}</span>
      </div>
      <div class="info-item">
        <span class="label">安装目录:</span>
        <span>{{ installDir }}</span>
      </div>
      <div class="info-item">
        <span class="label">是否已安装:</span>
        <template>
          <dict-tag :options="dict.type.edge_nodes_install_status" :value="nodeInfo.installStatus"/>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import {getClusterByNodeId, getInstallPath} from "@/api/nodes/clusters";
import {getPortByNodeId, getSshByNodeId} from "@/api/nodes/ssh";
import {getIpByNodeId} from "@/api/nodes/ip";

export default {
  dicts: ['edge_nodes_ip_status','edge_nodes_install_status'],
  data() {
    return {
      nodeInfo:{
        connections:null,
        cpu:null,
        dnsLine:null,
        downstreamBandwidth:null,
        installStatus:null,
        ip:null,
        load:null,
        memory:null,
        nodeId:null,
        nodeName:'',
        status:null
      },
      sshInfo:[],
      nodeName: '',
      isEnabled: true,
      cluster: null,
      ipAddress: '',
      region: null,
      group: null,
      syncIpList: false,
      sshHost: null,
      sshPort: null,
      sshAuth: null,
      cacheDiskCapacity: null,
      diskWriteSpeed: '-',
      cacheContentCapacity: null,
      cpuThreads: null,
      apiNodeAddress: '',
      connectionStatus: '',
      apiConnectionStatus: null,
      secret: 'abcdef123456',
      installDir: '/opt/node',
      isInstalled: false,
      showMoreOptions: false,
    };
  },
  created() {
    // 组件创建时获取路由参数
    this.nodeInfo = this.$route.params.nodeInfo
    this.getClusterByNodeId();
    this.getSshByNodeId();
    this.getPortByNodeId();
    this.getIpByNodeId();
    this.getInstallPath();
  },
  methods: {
    // 根据节点Id获取所属集群
    getClusterByNodeId() {
      getClusterByNodeId(this.nodeInfo.nodeId).then(response => {
        this.cluster = response
        this.loading = false;
      });
    },
    // 获取集群安装目录
    getInstallPath(){
      getInstallPath(this.nodeInfo.nodeId).then(response => {
        this.installDir = response
      })
    },
    // 根据节点Id查询节点ssh认证信息
    getSshByNodeId() {
      console.log(this.nodeInfo.nodeId, 'this.nodeInfo.nodeId');
      const nodeId = Number(this.nodeInfo.nodeId);
      if (isNaN(nodeId)) {
        return;
      }
      // 调用函数时传递数组
      getSshByNodeId([nodeId]).then(response => {
        this.sshInfo = response.data;
        this.loading = false;
      }).catch(error => {
        this.loading = false;
      });
    },
    // 获取节点主机端口
    getPortByNodeId() {
      getPortByNodeId(this.nodeInfo.nodeId).then(response => {
        this.sshPort = response.data;
        this.loading = false;
      });
    },
    // 获取节点ssh主机地址
    getIpByNodeId(){
      getIpByNodeId(this.nodeInfo.nodeId).then(response => {
        this.sshHost = response.msg;
        this.loading = false;
      });
    },
    toggleMoreOptions() {
      this.showMoreOptions = !this.showMoreOptions;
    },
    installNode() {
      // 处理安装逻辑
      this.connectionStatus = '已连接';
    },
  },
};
</script>

<style scoped lang="scss">
.node-details {
  font-family: 'Roboto', sans-serif;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .page-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
  }

  .node-info, .connection-status, .installation-info {
    background-color: white;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
  }

  .label {
    font-weight: 600;
    color: #555;
  }

  .more-options {
    text-align: center;
  }

  .toggle-btn {
    background-color: #4CAF50;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
  }

  .toggle-btn:hover {
    background-color: #45a049;
  }

  .expanded-options {
    margin-top: 15px;
    background-color: #f2f2f2;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .status-item {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
  }

  .status-enabled {
    color: green;
    font-weight: bold;
  }

  .status-disabled {
    color: red;
    font-weight: bold;
  }

  .status-connected {
    color: green;
  }

  .status-disconnected {
    color: red;
  }

  .install-btn {
    background-color: #ff5722;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
  }

  .install-btn:hover {
    background-color: #e64a19;
  }
}

.domain-list table {
  width: 100%;
  border-collapse: collapse;
}

.domain-list th,
.domain-list td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.domain-list th {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
}

.domain-list tbody tr:hover {
  background-color: #f5f5f5;
}

.domain-list td {
  color: #666;
}

.domain-list td:nth-child(6) {
  text-transform: capitalize;
}

.domain-list td.status {
  color: #d44950;
}

.domain-list td.status.active {
  color: #28a745;
}
</style>
